<script lang='ts' setup>
// import { reactive,onMounted,ref} from 'vue'

const props = withDefaults(defineProps<{
    tableData: Array<any>
	previewInfo: Function	
}>(), {
    tableData: () => ([
        {
            id:1,
            name: '雁塔店',
			cardId: 4566,
			photo: 'img',
			cardName: '卡项名称',
            property: '属性', 
			spec: '规格',
			cellPrice: '销售价格',
			useCount: '666',
			useTime: '2023-12-14 15:32:45',
			debtMoney: 89555,
			totalCost: 565,
			productCost: '成本',
			manualCost: 5645,
			commissionCost: 56,
			needCount: 56
        }
    ]),
	previewInfo: (id: number) => {}
})

const previewInfo = (id: number) => {
	props.previewInfo(id)
}
</script>

<template>
    <main>
        <el-table :data="props.tableData" style="width: 100%">
				<el-table-column label="门店"  prop="id" />
				<el-table-column label="卡项ID"  prop="cardId" />
				<el-table-column label="图片"  prop="photo" />
				<el-table-column label="卡项名称"  prop="cardName" />
				<el-table-column label="属性"  prop="property" />
				<el-table-column label="规格" prop="spec"  />
				<el-table-column label="销售价格" prop="cellPrice"  />
				<el-table-column label="可用次数" prop="useCount"  />
				<el-table-column label="可用时间" prop="useTime"  />
				<el-table-column label="负债金额" prop="debtMoney" />
				<el-table-column label="总体成本" prop="totalCost" />
				<el-table-column label="产品成本" prop="productCost" />
				<el-table-column prop="manualCost">
					<template #header>
						<section style="display: flex; align-items: center;">
							<span>手工成本</span>
							<el-tooltip  effect="dark" content="此处只计算商品设置的手工成本"  style=""
								placement="right-start" >
								<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
							</el-tooltip> 
						</section> 
					</template>
				</el-table-column>
				<el-table-column prop="commissionCost">
					<template #header>
						<section style="display: flex; align-items: center;">
							<span>消耗提成成本</span>
							<el-tooltip  effect="dark" content="此处只计算商品设置的消耗提成成本"  style=""
								placement="right-start" >
								<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
							</el-tooltip> 
						</section> 
					</template>
				</el-table-column>
				<el-table-column label="所需产品数量" prop="needCount" />
				<el-table-column label="操作">
					<template #default="scope">
						<el-link :underline="false" type="primary" @click="previewInfo(scope.row.id)">查看详情</el-link>
					</template>
				</el-table-column>
			</el-table>
    </main>
</template>

<style lang='scss' scoped>

</style>